<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div>编辑版本</div>
        <el-input type="textarea" :rows="35" placeholder="没有内容" v-model="txtProjectData"> </el-input>
        <div style="text-align: center;">
          <el-button type="primary" @click="saveProjectData">保存此版本</el-button>
        </div>
      </el-col>
      <el-col :span="8">
        <div>项目版本</div>
        <pre>
        <el-input
            type="textarea"
            :rows="30"
            placeholder="没有内容"
            v-html="propHtmlProjectData">
        </el-input>
      </pre>
      </el-col>
      <el-col :span="8">
        <div>产品版本</div>
        <pre>
        <el-input
            type="textarea"
            :rows="30"
            placeholder="没有内容"
            v-html="propHtmlProductData">
        </el-input>
      </pre>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'FortenDiff',
  title: '版本比对',
  data() {
    return {
      txtProjectData: ''
    }
  },
  mounted() {
    this.txtProjectData = this.propProjectData
  },
  props: ['propHtmlProductData', 'propHtmlProjectData', 'propProjectData'],
  methods: {
    saveProjectData() {
      this.$emit('saveProjectData', this.txtProjectData)
    }
  }
}
</script>
<style lang="scss" scoped>
    pre {
    overflow-y: auto;
    height: 675px;
    margin-top: 0px;
    border: 1px solid #DCDFE6;
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}
</style>
